<template>
  <div class="home">
    <div id="certify" class="container">
      <swiper
        v-if="list.length > 0"
        :watchSlidesProgress="true"
        slidesPerView="auto"
        :centeredSlides="true"
        :loop="true"
        :loopedSlides="5"
        :autoplay="true"
        navigation
        :pagination="{ clickable: true }"
        @progress="progress"
        @setTransition="setTransition"
        class="iconfont"
      >
        <swiper-slide v-for="item of list" :key="item.id">
          <router-link :to="'/class/' + item.targetContent">
            <img :src="item.imgUrl" width="644" />
          </router-link>
        </swiper-slide>
      </swiper>
      <p class="title">{{ pic.name }}</p>
    </div>
    <picture-list :url="url"></picture-list>
  </div>
</template>

<script>
import { defineComponent, computed, watchEffect } from "vue";
import { useStore } from "vuex";
import PictureList from "../components/PictureList";
// import Swiper core and required components
import SwiperCore, { Navigation, Pagination, Autoplay } from "swiper";

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";
// install Swiper components
SwiperCore.use([Navigation, Pagination, Autoplay]);

export default defineComponent({
  components: {
    Swiper,
    SwiperSlide,
    PictureList,
  },
  setup() {
    const store = useStore();
    document.title = "精选壁纸-来自联想锁屏";
    store
      .dispatch("banner")
      .then((data) => {
        console.log(data);
      })
      .catch((e) => {
        console.log(e);
      });
    let skip = 0;
    const token = computed(() => store.state.token || 0);
    let url = `wallpapercontent/wallpaper/recommends/img_stream?skip=${skip}&limit=24&count=&refresh=true`;
    watchEffect(() => {
      const toc = token.value;
      store
        .dispatch("getList", url)
        .then((data) => {
          console.log(toc);
        })
        .catch((e) => {
          console.log(e);
        });
    });

    const list = computed(() => store.state.banner || 0);
    const pic = computed(() => store.state.columns || 0);
    return {
      list,
      pic,
      url,
    };
  },
  methods: {
    progress(swiper, progress) {
      //遍历所有slides
      for (let i = 0; i < swiper.slides.length; i++) {
        //获取到轮播图
        var slide = swiper.slides.eq(i);
        console.log(slide);
        //获取到progress
        var slideProgress = swiper.slides[i].progress;
        console.log(slideProgress);
        let modify = 1;
        if (Math.abs(slideProgress) > 1) {
          modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
        }
        //轮播图偏移量，确定位置
        let translate = slideProgress * modify * 260 + "px";
        //
        let scale = 1 - Math.abs(slideProgress) / 5;
        let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
        slide.transform("translateX(" + translate + ") scale(" + scale + ")");
        slide.css("zIndex", zIndex);
        slide.css("opacity", 1);
        // 如果透明度文0，不显示
        if (Math.abs(slideProgress) > 2) {
          slide.css("opacity", 0);
        }
      }
    },
    setTransition(swiper, transition) {
      for (var i = 0; i < swiper.slides.length; i++) {
        var slide = swiper.slides.eq(i);
        slide.transition(transition);
      }
    },
  },
});
</script>
<style lang="stylus" scoped>
#certify {
  padding-top: 20px;
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.title {
  text-align: left font-weight bold font-size 20px;
}

.home>>>#certify .swiper-container {
  padding-bottom: 60px;
}

#certify .swiper-slide {
  // width: 520px;
  // height: 408px;
  width: 644px;
  height: 282px;
  background: #fff;
  box-shadow: 0 8px 30px #ddd;
}

#certify .swiper-slide img {
  display: block;
}

#certify .swiper-slide p {
  line-height: 98px;
  padding-top: 0;
  text-align: center;
  color: #636363;
  font-size: 1.1em;
  margin: 0;
}

#certify .swiper-pagination {
  width: 100%;
  bottom: 20px;
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

#certify .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}

#certify .swiper-pagination-bullet-active {
  border: 3px solid #00aadc;
  background-color: #fff;
  cursor: pointer;
}

#certify .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 5px;
  border: 3px solid #fff;
  background-color: #d5d5d5;
  width: 10px;
  height: 10px;
  opacity: 1;
  cursor: pointer;
}

#certify .swiper-pagination-bullets .swiper-pagination-bullet-active {
  border: 3px solid #00aadc;
  background-color: #fff;
}

#certify:hover .swiper-button-prev {
  display: flex;
}

#certify:hover .swiper-button-next {
  display: flex;
}

#certify .swiper-button-prev, .swiper-button-next {
  display: none top 40% color rgb(228, 228, 228);
}

#certify .swiper-button-prev:after, .swiper-button-next:after {
  font-size: 30px;
}

#certify .swiper-button-prev:hover {
  color: #ccc;
}

#certify .swiper-button-next:hover {
  color: #ccc;
}
</style>
